<script setup lang="ts">
import { companyBillInfo } from "~/api/user";

const emits = defineEmits(["closeDialog"]);

const closeDialog = (params = {}) => {
  emits("closeDialog", params);
};
const form = ref({
  companyName: "",
  taxNumber: "",
  address: "",
  telephone: "",
  email: "",
});
const confirm = async () => {
  if (!form.value.companyName) {
    ElMessage.error("请输入抬头名称");
    return;
  }
  // 过滤空格后长度为0
  if (form.value.companyName.trim().length === 0) {
    ElMessage.error("请输入抬头名称");
    return;
  }
  if (!form.value.taxNumber.trim()) {
    ElMessage.error("请输入纳税识别号");
    return;
  }
  if (form.value.taxNumber.trim().length === 0) {
    ElMessage.error("请输入纳税识别号");
    return;
  }
  if (!form.value.address.trim()) {
    ElMessage.error("请输入开票企业地址");
    return;
  }
  if (form.value.address.trim().length === 0) {
    ElMessage.error("请输入开票企业地址");
    return;
  }
  if (!form.value.telephone.trim()) {
    ElMessage.error("请输入开票联系电话");
    return;
  }
  if (form.value.telephone.trim().length === 0) {
    ElMessage.error("请输入开票联系电话");
    return;
  }
  if (!form.value.email.trim()) {
    ElMessage.error("请输入邮箱地址");
    return;
  }
  if (form.value.email.trim().length === 0) {
    ElMessage.error("请输入邮箱地址");
    return;
  }
  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(form.value.email.trim())) {
    ElMessage.error("请输入正确的邮箱格式");
    return;
  }
  try {
    await companyBillInfo(form.value);
    ElMessage.success("添加成功");
    closeDialog();
  } catch (e) {
    console.log(e);
  }
};
</script>

<template>
  <div class="dialog-contact" @click="closeDialog">
    <div class="dialog-content" @click.stop>
      <div class="dialog-header">
        <div class="left">
          <img src="../../assets/dialog-icon.png" alt="" />
          <span>添加发票抬头</span>
        </div>
        <img
          class="close"
          src="../../assets/modal-close.png"
          alt=""
          @click="closeDialog"
        />
      </div>
      <div class="dialog-body">
        <div class="form">
          <p class="label">抬头名称</p>
          <p class="input">
            <input
              type="text"
              v-model="form.companyName"
              placeholder="请输入抬头名称"
            />
            <img v-if="form.companyName" src="../../assets/clear-icon.png" alt="" @click="form.companyName = ''" />
          </p>
          <p class="label">纳税识别号</p>
          <p class="input">
            <input
              type="text"
              v-model="form.taxNumber"
              placeholder="请输入纳税识别号"
            />
            <img v-if="form.taxNumber" src="../../assets/clear-icon.png" alt="" @click="form.taxNumber = ''" />
          </p>
          <p class="label">开票企业地址</p>
          <p class="input">
            <input
              type="text"
              v-model="form.address"
              placeholder="请输入开票企业地址"
            />
            <img v-if="form.address" src="../../assets/clear-icon.png" alt="" @click="form.address = ''" />
          </p>
          <p class="label">开票联系电话</p>
          <p class="input">
            <input
              type="text"
              v-model="form.telephone"
              placeholder="请输入开票联系电话"
            />
            <img v-if="form.telephone" src="../../assets/clear-icon.png" alt="" @click="form.telephone = ''" />
          </p>
          <p class="label">邮箱地址</p>
          <p class="input">
            <input
              type="email"
              v-model="form.email"
              placeholder="请输入邮箱地址"
            />
            <img v-if="form.email" src="../../assets/clear-icon.png" alt="" @click="form.email = ''" />
          </p>
        </div>
      </div>
      <div class="dialog-footer">
        <span @click="closeDialog">取消</span>
        <span @click="confirm">保存</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dialog-contact {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 30, 40, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-content {
  width: 400px;
  background: #fff;
  border-radius: 12px 12px 12px 12px;
  padding: 24px;
  box-sizing: border-box;
}
.dialog-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .close {
    cursor: pointer;
    width: 16px;
    height: 16px;
  }
}
.form {
  display: flex;
  flex-direction: column;
  .label {
    font-weight: bold;
    line-height: 36px;
  }
  .input {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid rgba(25, 30, 40, 0.08);
    height: 40px;
    padding: 0 12px;
    input {
      flex: 1;
      border: none;
      outline: none;
      user-select: none;
      height: 100%;
      padding-right: 12px;
    }
    img {
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
  }
}
.dialog-footer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 36px;
  span {
    width: 92px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    &:nth-child(1) {
      color: rgba(25, 30, 40, 0.6);
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(25, 30, 40, 0.08);
    }
    &:nth-child(2) {
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      color: #fff;
      margin-left: 12px;
    }
  }
}
</style>
